<template>
	<view id="agreement">
		<div class="boxDiv">
			<view class="text" v-html="obj.content"></view>
			<image :src="drawImgPath" style="width:100%;" mode="widthFix" v-if="drawImgPath"></image>
		</div>
		<view class="boxFooter">
			<text class="btn" @click="drawStart()" :style="haveSign?'color:#CCC':''">开始签名</text>
			<!--<button class="btn" @click="drawSumbit()">确认签名</button>-->
			<text class="btn" @click="drawUrl()" v-if="haveSign">完善资料</text>
		</view>
		<div class="draw" v-if="drawer">
			<wyj-sign />			
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				drawImgPath:'',
				canvaImg:'',
				haveSign:false,
				drawer:false,
				obj:{}
			}
		},
		onLoad(option){
			this.getDZXY()
			uni.$on('getSignImg', (res) => {
				this.canvaImg = res
				this.drawer=false
				this.saveDZXY()
			});
			uni.$on('closeCan', (res) => {
				if(res) this.drawer=false
			});
		},
		mounted() {
			
		},
		methods: {
			saveDZXY(){
				this.httpClient.upload('agent/Agent/sureDzxy',{
					name: 'file',
					headimg: this.canvaImg
				}).then(res=>{
					if(res.code==1){
						this.haveSign=true
						this.drawImgPath=res.url
					}
				})
			},
			//开始签名
			drawStart(){
				if(!this.haveSign){
					this.drawer=true
					setTimeout(function(){
					    plus.screen.lockOrientation('landscape-primary');
					},10)
				}
			},
			//获取电子合同
			getDZXY(){
				this.httpClient.post('agent/index/getDZXY', {}).then(res=>{
					console.info(res)
					if(res.code==1){
						console.info("OK")
						this.obj=res.data
					}
				})
			},
			drawUrl(){
				uni.reLaunch({
					url:'/pages/my/info'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	#agreement{
		.boxDiv{
			
		padding:10px;
			   margin:10px;
			   border:1px solid #EEE;
			    background-color: #FFF;
			    border-radius: 10px;
			    position: relative;
		}
		.signature{
			border: 1rpx dotted black;
			background: #FFF;
			margin: 10rpx;
			height:calc(100% - 80rpx);
			width:calc(100% - 20rpx);
			align-self: center;
		}
		.boxFooter{
		    height:50rpx;
		    text-align: center;
		    width:100%;
		}
		.draw{
		    position: fixed;
		    left:0;
		    top:0;
		    right:0;
		    bottom:0;
		    background-color: #FFF;
		    z-index: 9998;
		}
		.btn{
		    background-color: #EEE;
		    border:1rpx solid #CCC;
		    border-radius: 5px;
		    outline: none;
			color:#333;
		}
	}
	
</style>
